<template>
	<view class="box">
		<!-- top -->
		<view class="top">
			<u-upload :fileList="fileList" @afterRead="afterRead" name="avatar" :maxCount="1" :previewImage="false"
				:deletable="false">
			</u-upload>
			<u--text text="编辑头像" align="center"></u--text>
		</view>
		<!-- main -->
		<view class="main">
			<view class="item">
				<u--text text="手机号" bold></u--text>
				<u-input placeholder="请输入手机号" border="none" type="number" v-model="telNum" @blur="checkTel"
					maxlength=11></u-input>
			</view>

			<view class="item">
				<u--text text="车牌号" bold></u--text>
				<u-input placeholder="请输入车牌号" border="none" type="text" v-model="a" maxlength=7></u-input>
			</view>

			<view class="item">
				<u--text text="团体车队信息" bold></u--text>
				<u-input placeholder="请输入团体车队信息" border="none" type="text" v-model="b" maxlength=20></u-input>
			</view>

			<view class="item">
				<u--text text="家庭车队" bold></u--text>
				<u-input placeholder="请输入家庭车队信息" border="none" type="text" v-model="c" maxlength=20></u-input>
			</view>

			<view class="item">
				<u--text text="生日" bold></u--text>

				<u-input placeholder="请选择出生日期" border="none" type="text" v-model="date_" @focus="show = true"></u-input>
			</view>

		</view>
		<u-datetime-picker :show="show" v-model="birthday" mode="date" @cancel="show = false"
			@confirm="confirmDate"></u-datetime-picker>

	</view>
</template>
<script>
export default {
	data() {
		return {
			fileList: [],
			telNum: "",
			show: false,
			date_: "",
			birthday: Number(new Date())
		}
	},
	methods: {
		afterRead(event) {
			console.log(event)
			this.fileList[0] = event.file.url
		},
		checkTelephone(telephone) {
			var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
			if (!reg.test(telephone)) {
				return false;
			} else {
				return true;
			}
		},
		checkTel() {
			const res = checkTelephone(telNum.value)
			if (!res) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确的手机号码'
				})
			}
		},
		confirmDate(e) {
			const date = new Date(e.value)
			const year = date.getFullYear()
			const month = date.getMonth() + 1
			const day = date.getDate()
			this.date_ = year + '-' + month + '-' + day
			this.show = false
		}
	}
}
</script>
<style lang="scss" scoped>
.top {
	background-color: #E0EAFF;
	display: flex;
	flex-direction: column;
	justify-content: center;

	::v-deep .u-upload__wrap {
		display: flex;
		justify-content: center;
	}

	padding: 80rpx 0 60rpx 0;
	margin-bottom: 40rpx;
}

.main {
	padding: 0 80rpx;

	.item {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-bottom: 40rpx;
		padding: 10rpx 0;

		::v-deep .u-text {
			flex: 1.5;
		}

		::v-deep .u-input {
			flex: 3;
		}
	}
}
</style>
